<template>
  <div class="port clearfloat">
    <div class="item" @click="selectPort(1)">
      <div class="bg agent_img"></div>
      <span class="lable">我是代理人</span>
    </div>
    <div class="item" @click="selectPort(2)">
      <div class="bg inventor_img"></div>
      <span class="lable">我是发明人</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      login_type: 1,
    }
  },
  methods: {
    selectPort (type) {
      this.$router.push({
        path: '/login',
        query: {
          type: type
        }
      })
    }
  }
}
</script>

<style lang='less'>
  .port {
    // width:549px;
    display: flex;
    justify-content:flex-start;
    height:260px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .item {
      flex: 1;
      width: 254px;
      height: 100%;
      // background:rgba(255,255,255,1);
      border-radius:10px;
      margin-left: 60px;
      position: relative;
      cursor: pointer;

      .lable {
        padding: 7px 18px;
        display: inline-block;
        font-size: 15px;
        color:rgba(36,157,255,1);
        position: absolute;
        bottom: 10px;
        left: 70px;
        border-radius:15px;
      }
      .bg {
        width:206px;
        height:188px;
        position: absolute;
        top: 19px;
        left: 17px;
      }
      .agent_img {
        background: url('../../assets/img/agent.png') no-repeat;
        background-size:cover;

      }
      .inventor_img {
        background: url('../../assets/img/inventor.png') no-repeat;
        background-size:cover;
        height: 195px;
        top: 15px;
      }
    }
    .item:first-child {
      margin-left: 0;
    }
    // .item:active {
    //   background:rgba(36,157,255,1);
    //   .lable {
    //     color:rgba(255,255,255,1);
    //   }
    // }
    .item:hover {
      .lable {
        background:rgba(36,157,255,1);
        color:rgba(255,255,255,1);
      }
    }
    

    // background:rgba(255,255,255,1);

    // .content {
    //   width: 390px;
    //   height: 110px;
    //   position: absolute;
    //   top: 50%;
    //   left: 50%;
    //   transform: translate(-50%, -50%);
    //   // .el-radio-group  {
    //   //   width: 100%;
    //   //   padding: 0 10px;
    //   //   display: -webkit-flex;
    //   //   display: flex;
    //   //   -webkit-justify-content: space-between;
    //   //   justify-content: space-between;

    //   //   .el-radio {

    //   //     .el-radio__input {
    //   //       .el-radio__inner {
    //   //         border:1px solid rgba(36,157,255,1);
    //   //       }
    //   //     }
    //   //     .el-radio__label {
    //   //       font-size: 15px;
    //   //       color:rgba(36,157,255,1);
    //   //     }
    //   //   }
    //   // }
    //   // .el-button {
    //   //   width: 100%;
    //   //   margin-top: 50px;
    //   //   font-size: 15px;
    //   // }

    // }

  }
</style>